<template>
  <div class="basegroup">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="line-height: 36px;">库位组管理</span>
        <el-button style="float: right;" type="primary" @click="dialogOpen('add')" v-if="USER.auth.indexOf('base_basegroup_add')!==-1">新增库位组</el-button>
      </div>
      <s-table
        :table="table"
        @http="tableWatch">
        <el-form-item label="名称" prop="mc">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_mc"
                    placeholder="库位组名称" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="ms">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_ms"
                    placeholder="库位组描述" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
        <el-form-item label="激活状态">
          <el-select v-model="autoVue_table_sfyx"
                     placeholder="是否激活">
            <el-option
              label="全部"
              value=""></el-option>
            <el-option
              label="未激活"
              value="0"></el-option>
            <el-option
              label="已激活"
              value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="autoVue_table_kwzlx"
                     placeholder="库位组类型">
            <el-option
              label="全部"
              value=""></el-option>
            <el-option
              v-for="item in BASEGROUP.kwzlx"
              :key="item.dictionaryid"
              :label="item.value"
              :value="item.dictionaryid">
            </el-option>
          </el-select>
        </el-form-item>
        <el-table-column
          fixed="right"
          align="center"
          slot="operation"
          class-name="operationMore"
          label="可用操作"
          width="80">
          <template scope="s">
            <el-button type="info" size="mini" v-if="USER.auth.indexOf('base_basegroup_enable')!==-1 && s.row.sfyx !== '1'" @click="tableActive(s.row)"><i class="fa fa-unlock" aria-hidden="true"></i></el-button>
            <div v-else>
              <el-button type="info" size="mini" @click="dialogSearchOpen(s.row)" icon="search"></el-button>
              <el-tooltip placement="top">
                <div slot="content">更多可用操作</div>
                <el-popover
                  popper-class="demo-table-expand"
                  placement="right"
                  title="更多可用操作"
                  trigger="click">
                  <slot name="content">
                    <el-button type="success" icon="edit" size="mini" @click="dialogEditOpen(s.row)" v-if="USER.auth.indexOf('base_basegroup_edit')!==-1"></el-button>
                    <el-button type="danger" size="mini" @click="tableDelete(s.row)" v-if="USER.auth.indexOf('base_basegroup_disable')!==-1"><i class="fa fa-lock" aria-hidden="true"></i> 禁用</el-button>
                  </slot>
                  <el-button slot="reference" type="info" icon="more" :plain="true" size="mini" class="__reference"></el-button>
                </el-popover>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </s-table>
    </el-card>
    <s-dialog :dialog="dialog" :close="dialogInit">
      <p slot="title">{{dialog.title}}库位组</p>
      <el-tabs v-model="dialog.activeName">
        <el-tab-pane label="基础设置" name="1" disabled>
          <s-form :form="formDialog1" ref="formDialog1">
            <el-row>
              <el-col :xs="24" :lg="{span: 11, offset: 0}" class="">
                <el-form-item prop="mc" label="名称">
                  <el-input
                    type="text"
                    v-model="formDialog1.mc"
                    placeholder="库位组名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :lg="{span: 10, offset: 2}" class="">
                <el-form-item label="当前仓库">
                  <div class="s-content">
                    <el-tag type="success">{{USER.user.orgName}}</el-tag>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :xs="24" :lg="{span: 11, offset: 0}" class="">
                <el-form-item prop="lx" label="库位组类型">
                  <el-select v-model="formDialog1.kwzlx" placeholder="请选择" :disabled="this.dialog.title == '修改'">
                    <el-option
                      v-for="item in BASEGROUP.kwzlx"
                      :key="item.dictionaryid"
                      :label="item.value"
                      :value="item.dictionaryid">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :lg="{span: 10, offset: 2}" class="">
                <el-form-item prop="sfyx" label="激活状态">
                  <div class="s-content">
                    <el-switch
                      v-model="formDialog1.sfyx"
                      on-color="#13ce66"
                      on-text="ON"
                      off-text="OFF"
                      off-color="#ff4949"
                      on-value="1"
                      off-value="0">
                    </el-switch>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :xs="24" :lg="{span: 11, offset: 0}" class="">
                <el-form-item prop="ms" label="描述">
                  <el-input
                    type="text"
                    v-model="formDialog1.ms"
                    placeholder="库位组描述"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </s-form>
        </el-tab-pane>
        <el-tab-pane label="选择库位" name="2" disabled>
          <s-table
            :expand="false"
            :multiSelect="true"
            ref="tableAdd"
            :table="tableAdd">
            <el-table-column
              fixed="right"
              align="center"
              slot="operation"
              class-name="operationMore"
              label="操作"
              width="80">
              <template scope="s">
                <el-button type="danger" icon="delete" size="mini" @click="tableAddDelete(s.row)"></el-button>
              </template>
            </el-table-column>
            <el-form-item slot="multiSelect" label="多选操作" prop="multiSelect" v-if="tableAdd.multiSelect">
              <el-row>
                <el-col :span="8">
                  <el-button size="small" type="danger" @click="tableAddDelete('')">多选删除</el-button>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="库位名称" prop="mc">
              <el-input type="text"
                        class="input"
                        v-model="autoVue_tableAdd_mc"
                        placeholder="库位名称" spellcheck="false" auto-capitalize="off" auto-complete="off"
                        auto-correct="off"></el-input>
            </el-form-item>
            <!--<el-form-item label="库位类型" prop="lx">-->
            <!--<el-select v-model="autoVue_tableAdd_lx"-->
            <!--placeholder="库位类型">-->
            <!--<el-option-->
            <!--label="全部"-->
            <!--value=""></el-option>-->
            <!--<el-option-->
            <!--v-for="item in BASEGROUP.sfyx"-->
            <!--:key="item.dictionaryid"-->
            <!--:label="item.value"-->
            <!--:value="item.dictionaryid">-->
            <!--</el-option>-->
            <!--</el-select>-->
            <!--</el-form-item>-->
            <el-form-item label="库位层数" prop="cs">
              <el-input type="text"
                        class="input"
                        v-model="autoVue_tableAdd_cs"
                        placeholder="库位层数" spellcheck="false" auto-capitalize="off" auto-complete="off"
                        auto-correct="off"></el-input>
            </el-form-item>
          </s-table>
        </el-tab-pane>
      </el-tabs>
      <el-button slot="footer" v-if="dialog.activeName !== '1'" @click="dialogPre">上一页</el-button>
      <el-button slot="footer" type="info" v-if="dialog.activeName !== '2'" @click="dialogNext">下一页</el-button>
      <el-button slot="footer" type="success" v-if="dialog.activeName === '2'" @click="dialogSave">保存</el-button>
    </s-dialog>
    <s-dialog :dialog="dialogEdit" :close="dialogEditInit">
      <p slot="title">{{dialogEdit.title}}库位组</p>
      <s-form :form="formDialogEdit" ref="formDialogEdit">
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}" class="">
            <el-form-item prop="mc" label="名称">
              <el-input
                type="text"
                v-model="formDialogEdit.mc"
                placeholder="库位组名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}" class="">
            <el-form-item label="当前仓库">
              <div class="s-content">
                <el-tag type="success">{{USER.user.orgName}}</el-tag>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}" class="">
            <el-form-item prop="lx" label="库位组类型">
              <el-select v-model="formDialogEdit.kwzlx" placeholder="请选择" disabled>
                <el-option
                  v-for="item in BASEGROUP.kwzlx"
                  :key="item.dictionaryid"
                  :label="item.value"
                  :value="item.dictionaryid">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}" class="">
            <el-form-item prop="ms" label="描述">
              <el-input
                type="text"
                v-model="formDialogEdit.ms"
                placeholder="库位组描述"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </s-form>
      <el-button slot="footer" @click="dialogEditSave">保存</el-button>
    </s-dialog>
    <s-dialog :dialog="dialogSearch" :close="dialogSearchInit" :closeTip="false">
      <p slot="title">查看库位<span></span></p>
      <div class="__table">
        <el-button @click="dialogKwOpen()" class="__table_button"><i class="el-icon-plus"></i></el-button>
        <s-table :table="tableSearch" ref="tableSearch"  @http="tableWatch" :pagination="false" :control="false" :expand="false" :index="true">
        </s-table>
      </div>
      <el-button slot="footer" @click="dialogSearchSave">保存</el-button>
    </s-dialog>
    <s-dialog :dialog="dialogKw" :cloase="dialogKwInit">
      <s-table :table="tableKw" ref="tableKw" @http="tableWatch" :multiSelect="true"></s-table>
      <el-button slot="footer" @click="dialogKwSave">保存</el-button>
    </s-dialog>
  </div>
</template>

<script>
  import {AutoVue, AutoPromise} from '~/plugins/Tools';

  function __form () {
    return {
      mc: { value: '', rule: [ 'vNull' ], cRemarks: '' },
      ms: { value: '', rule: [], cRemarks: '' },
      sfyx:
        { value: '1',
          rule: [ 'vNull' ],
          cRemarks: '激活状态 0未激活 1已激活' },
      kwzlx:
        { value: '0',
          rule: [ 'vNull__change' ],
          cRemarks: '0收货 1上架 2集货' },
    };
  }
  function __formEdit () {
    return {
      mc: { value: '', rule: [ 'vNull' ], cRemarks: '' },
      ms: { value: '', rule: [], cRemarks: '' },
      sfyx:
        { value: '1',
          rule: [ 'vNull' ],
          cRemarks: '激活状态 0未激活 1已激活' },
      kwzlx:
        { value: '0',
          rule: [ 'vNull__change' ],
          cRemarks: '0收货 1上架 2集货' },
    };
  }
  export default AutoVue({
    name: 'base_kuquzu-FEzxwms',
    store: ['BASEGROUP', 'USER', 'DICTIONARY_basegroup'],
    data: {
      table: {
        column: [ { label: '库位组名称',
          prop: 'mc',
          minWidth: '0px',
          cRemarks: '',
          search: true },
        { label: '库位组描述',
          prop: 'ms',
          minWidth: '0px',
          cRemarks: '',
          search: true },
        { label: '库位组类型',
          prop: 'show_kwzlx',
          minWidth: '0px',
          cRemarks: '库位组类型 0收货 1上架 2 集货',
          search: true },
        { label: '库位数',
          prop: 'kws',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '激活状态',
          prop: 'show_sfyx',
          minWidth: '0px',
          cRemarks: '激活状态 0未激活 1已激活',
          elTag: {
            filterType: function (value) {
              return value === '未激活' ? 'danger' : 'success';
            },
          },
          search: true } ],
        url: '/wmslibrarypositiongroup/list',
        key: 'id',
        tableColumn: 5,
        muti: false,
      },
      formDialog1: __form(),
      formDialogEdit: __formEdit(),
      tableAdd: {
        column:
          [
            { label: '库位名称',
              prop: 'mc',
              minWidth: '0px',
              cRemarks: '',
              search: true },
            { label: '库位类型',
              prop: 'show_lx',
              minWidth: '0px',
              cRemarks: '0 存储库位 1件拣货库位 2箱拣货库位 3箱/件拣货库位 4待检库位 5理货库位 6组装工作库位',
              search: false },
            { label: '库位层数',
              prop: 'cs',
              minWidth: '0px',
              cRemarks: '',
              search: true },
            { label: '仓库名称',
              prop: 'ckmc',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '库区名称',
              prop: 'kqmc',
              minWidth: '0px',
              cRemarks: '',
              search: true },
            { label: '库位托盘数',
              prop: 'tps',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '拣货顺序',
              prop: 'xlsx',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '可承受重量',
              prop: 'cszl',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '可容纳体积',
              prop: 'rntj',
              minWidth: '0px',
              cRemarks: '',
              search: false },
            { label: '库位属性',
              prop: 'show_sx',
              minWidth: '0px',
              cRemarks: '0正常 1封存 2管控 3禁入',
              search: false },
            { label: '是否可以货品混放',
              prop: 'show_hphf',
              minWidth: '0px',
              cRemarks: '0不可 1允许',
              search: false },
            { label: '同货品批次是否可以混放',
              prop: 'show_pchf',
              minWidth: '0px',
              cRemarks: '0不可 1允许',
              search: false },
          ],
        url: '/wmslibrarypositiongroup/listkw',
        option: {
          kwzlx: '',
          kwzid: '',
        },
        ids: [],
        key: 'id',
        tableColumn: 3,
      },
      tableSearch: {
        column:
          [
            { label: '库位名称',
              prop: 'mc',
              minWidth: '0px',
              cRemarks: '',
              search: true },
            { label: '库位类型',
              prop: 'show_lx',
              minWidth: '0px',
              cRemarks: '0 存储库位 1件拣货库位 2箱拣货库位 3箱/件拣货库位 4待检库位 5理货库位 6组装工作库位',
              search: false },
            { label: '库位层数',
              prop: 'cs',
              minWidth: '0px',
              cRemarks: '',
              search: true },
          ],
        option: {
          kwzlx: '',
          kwzid: '',
        },
        ids: [],
        tableColumn: 3,
      },
      tableKw: {
        column:
          [
            { label: '库位名称',
              prop: 'mc',
              minWidth: '0px',
              cRemarks: '',
              search: true },
            { label: '库位类型',
              prop: 'show_lx',
              minWidth: '0px',
              cRemarks: '0 存储库位 1件拣货库位 2箱拣货库位 3箱/件拣货库位 4待检库位 5理货库位 6组装工作库位',
              search: false },
            { label: '库位层数',
              prop: 'cs',
              minWidth: '0px',
              cRemarks: '',
              search: true },
          ],
        tableColumn: 3,
      },
      dialog: {
        title: '新增',
        row: {},
        activeName: '1',
        ids: [],
      },
      dialogEdit: {
        title: '修改',
        row: {},
      },
      dialogSearch: {
      },
      dialogKw: {},
    },
    transition: 'slide-fade',
    methods: {
      tableActive (row) {
        this.$confirm('您将激活该库位组。', '确认激活？', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
        })
          .then(async _ => {
            let ids = [];
            for (let item of this.table.multipleSelection) {
              ids.push(item.id);
            }
            try {
              await this.post('/wmslibrarypositiongroup/yjh', {
                ids: ids.length === 0 ? [row.id] : ids,
              });
              this.tableWatch('table');
            } catch (err) {
              console.log(err);
            }
          })
          .catch(_ => {
          });
      },
      tableDelete (row) {
        this.$confirm('您将禁用该库位组。', '确认禁用？', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
        })
          .then(async _ => {
            let ids = [];
            for (let item of this.table.multipleSelection) {
              ids.push(item.id);
            }
            try {
              await this.post('/wmslibrarypositiongroup/bjh', {
                ids: ids.length === 0 ? [row.id] : ids,
              });
              this.tableWatch('table');
            } catch (err) {
              console.log(err);
            }
          })
          .catch(_ => {
          });
      },
      dialogInit () {
        this.tableClear('tableAdd');
        this.tableAdd.ids = [];
        this.dialog.row = {};
        this.dialog.activeName = '1';
        this.formDialog1 = {
          ...this.formDialog1,
          ...this.ObjectClone(__form()),
        };
        this.resetFields('formDialog1');
      },
      async dialogOpen (type, more) {
        if (type) {
          type = type.toUpperCase();
        } else return;
        switch (type) {
        case 'ADD':
          this.dialog.title = '新增';
          if (!this.DICTIONARY_basegroup) {
            await this.USE('DICTIONARY_basegroup');
          }
          break;
        case 'PUT':
          this.dialog.title = '修改';
          if (!this.DICTIONARY_basegroup) {
            await this.USE('DICTIONARY_basegroup');
          }
          this.dialog.row = more;
          this.formDialog1 = {
            ...this.formDialog1,
            ...this.ObjectClone(__form(), more),
          };
          break;
        }
        this.dialog.row = more;
        this.dialog.visible = true;
      },
      dialogPre () {
        this.dialog.activeName = parseInt(this.dialog.activeName) - 1 + '';
      },
      dialogNext (id) {
        this.VALIDATE('formDialog' + this.dialog.activeName, async option => {
          this.dialog.activeName = parseInt(this.dialog.activeName) + 1 + '';

          if (this.dialog.title === '修改') {
            await AutoPromise([
              async () => {
                if (!this.DICTIONARY_basegroup) {
                  await this.USE('DICTIONARY_basegroup');
                }
              },
              async () => {
                this.dialog.row = await this.get('/wmslibrarypositiongroup/getWmsLibrarypositiongroup/' + this.dialog.row.id);
                this.tableAdd.option.kwzlx = this.formDialog1.kwzlx;
                this.tableAdd.option.kwzid = this.dialog.row.id;
                this.tableAdd.url = '/wmslibrarypositiongroup/getWmsLibrarypositionXg';
                /* 注释：
                      let {list} = this.tableAdd.url;
                      相当于
                      let {list} = this.tableADD.url.list;
                * */
                let {ids} = await this.get('/wmslibrarypositiongroup/getWmsLibrarypositionIds/' + this.dialog.row.id);
                this.tableAdd.ids = ids;
                console.log('this.tableAdd.data.ids:' + this.tableAdd.data.ids);
                this.tableWatch('tableAdd');
                this.dialog.row.list.forEach(item => {
                  this.tableAdd.ids.push(item.id);
                });
              },
            ]);
          }
          if (this.dialog.title === '新增') {
            this.tableAdd.option.kwzlx = this.formDialog1.kwzlx;
            this.tableAdd.url = '/wmslibrarypositiongroup/listkw';
            this.tableWatch('tableAdd');
          }
        });
      },
      async dialogSave () {
        if (this.dialog.title === '新增') {
          if (this.tableAdd.multipleSelection.length < 1) {
            return this.$alert('请至少选择一个库位！', '提示');
          }
          let option = this.FORMOPTION('formDialog1');
          let list = [];
          this.tableAdd.multipleSelection.forEach(({id}) => {
            list.push({id});
          });
          option.list = list;
          try {
            await this.post('/wmslibrarypositiongroup/add', option);
            this.tableWatch('table');
            this.dialogInit();
            this.dialog.visible = false;
          } catch (err) {
            console.log(err);
          }
        } else {
          if (this.tableAdd.multipleSelection.length < 1) {
            return this.$alert('请至少选择一个库位！', '提示');
          }
          let option = this.FORMOPTION('formDialog1');
          let list = [];
          this.tableAdd.multipleSelection.forEach(({id}) => {
            list.push({id});
          });
          option.list = list;
          try {
            option.id = this.dialog.row.id;
            console.log(this.dialog.row.id);
            await this.post('/wmslibrarypositiongroup/edit', option);
            this.tableWatch('table');
            for (let index in this.dialog.row) {
              if (this.dialog.row.hasOwnProperty(index)) {
                this.dialog.row[index] = option[index];
              }
            }
            this.dialogInit();
            this.dialog.visible = false;
          } catch (err) {
            console.log(err);
          }
        }
      },
      tableAddDelete (row) {
        this.$confirm('您将删除选择的库位 ' + row.mc, '确认删除？', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
        })
          .then(_ => {
            let mc = row.mc;
            for (let i = mc; i < this.tableAdd.data.length; i++) {
              this.tableAdd.data[i].mc--;
            }
            this.tableAdd.data.splice(mc - 1, 1);
          });
      },
      async dialogEditOpen (row) {
        await AutoPromise([
          async () => {
            if (!this.DICTIONARY_basegroup) {
              await this.USE('DICTIONARY_basegroup');
            }
          },
        ]);
        this.dialogEdit.row = row;
        this.formDialogEdit = {
          ...this.formDialogEdit,
          ...this.ObjectClone(__formEdit(), row),
        };
        this.dialogEdit.visible = true;
      },
      dialogEditSave () {
        this.VALIDATE('formDialogEdit', async option => {
          option.id = this.dialogEdit.row.id;
          try {
            delete option.kwzlx;
            await this.post('/wmslibrarypositiongroup/edit', option);
            this.dialogEditInit();
            this.tableWatch('table');
            this.dialogEdit.visible = false;
          } catch (err) {
            console.log(err);
          }
        });
      },
      async dialogSearchOpen (row) {
        this.dialogSearch.visible = true;
      },
      dialogKwOpen () {
        this.dialogKw.visible = true;
      },
    },
    mounted: async function () {
      this.tableWatch('table');
      if (!this.DICTIONARY_basegroup) {
        await this.USE('DICTIONARY_basegroup');
      }
      console.log(this);
    },
  });
</script>
<style scoped lang="scss">
  .box-card {
    margin: 20px;
  }

  .createTimeSpan {
    display: block;
    margin-top: 34px;
  }

  @media screen and (max-width: 800px) {
    .createTimeSpan {
      margin-top: 0;
    }
    .box-card {
      margin: 0;
    }
  }

  .el-select {
    width: 100%;
  }
</style>

<style lang="scss">

</style>
